<template>
    <div>
        <el-form-item label="非父子组件的值">
            <el-input v-model="msgFromChild" />
        </el-form-item>
        <el-form-item label="待办清单">
            <el-input v-model="text" />
        </el-form-item>
        <el-form-item label="">
            <el-button typr="" @click="clearInput">清空</el-button>
            <el-button typr="primary" @click="submit">提交</el-button>
            <el-button typr="danger" @click="$emit('removeAll')">数据重置</el-button>
        </el-form-item>
    </div>
</template>

<script>
import { onMounted, ref } from "vue"
import  bus from "vue3-eventbus";

export default {
    name: 'Event',
    props: {
    },
    setup(props, cxt) {
        const text = ref("我是子组件的值")
        const msgFromChild = ref("")
        const clearInput = function () {
            text.value = ''
        }
        const submit = function () {
            withCtx.emit('toList', tetx.value)
        }
        onMounted(() => {
            bus.on('getMsg', (value)=>{
                msgFromChild.value = value
            })
        })
        

        return {
            text,
            submit,
            clearInput,
            msgFromChild
        }
    }
}
</script>

<style></style>